<template>
  <el-container style="height: 100%;">
    <el-tabs v-model="curtab" @tab-click="handleClick" class="custom-tabs">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabs" :key="item.id">
        <component :is="item.id" @changeComponent="changeComponent" :params="params"  v-if="refresh" ref="resource"></component>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script>
// import '../main.css';
import ftpresource from './ftpresource/index'
import databaseresource from './databaseresource/index'

export default {
  name: 'resourcemanage',
  components: {
    ftpresource,
    databaseresource,
    // FTPConfig
  },
  data() {
    return {
      refresh: true,
      curtab: 'ftpresource',
      tabs: [
        { id: 'ftpresource', name: '第三方接口资源' },
        { id: 'databaseresource', name: '数据库资源' }
      ],
      params: ''
    }
  },
  methods: {
    handleClick(tab, event) {
      this.curtab = tab.name;
      tab.$children[0].layout&&tab.$children[0].layout();
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      })
    },
    changeComponent(params) {
      this.curtab = params
    }
  },
}
</script>
<style scoped>
  .custom-tabs {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .custom-tabs /deep/ .el-tabs__content {
    height: calc(100% - 55px);
    overflow: auto;
  }
  .custom-tabs /deep/ .el-tabs__content .el-tab-pane{
    overflow-x: hidden;
    height: 100%;
  }
  .custom-tabs /deep/.el-tabs__item.is-disabled {
    color: #303133;
    cursor:default
  }
  .custom-tabs /deep/.el-tabs__item.is-active {
    color: #409EFF;
  }
</style>
